<template>
  <div class="navSwiperOuter">
    <div class="navOuter">
      <div class="navTop">
        <ul class="navTopL">
          <li :class="{ activeLi: course.id === courseListF }" v-for="course in courseList" :key="course.id"
            @click="changeB(course.id)">
            <span>{{ course.msg }}</span>
            <i class="iconfont icon-youjiantou"></i>
          </li>
        </ul>
        <div class="navTopR">
          <el-carousel indicator-position="outside" height="345px">
            <el-carousel-item v-for="item in slidersList" :key="item.id">
              <img class="lbt" :src="item.imageUrl" alt="轮播图">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="navBootom">
        <ul>
          <li>
            <div class="navBootomL">
              <i class="iconfont icon-denglong2"></i>
            </div>
            <div class="navBootomR">
              <h3>上</h3>
              <span>简介</span>
            </div>
          </li>
          <li>
            <div class="navBootomL">
              <i class="iconfont icon-denglong2"></i>
            </div>
            <div class="navBootomR">
              <h3>上</h3>
              <span>简介123</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue';
import { getSliders } from '../../request/api/api';
import type { slidersDataI } from '../../type/index';

onBeforeMount(() => {
  // 获取轮播图数据
  getSliders().then(res => {
    // console.log(res.data.list)
    slidersList.value = res.data.list
  })
})

const courseList = ref([
  {
    id: 1,
    msg: 'html/css'
  },
  {
    id: 2,
    msg: 'Javascript'
  },
  {
    id: 3,
    msg: 'VueJs'
  },
  {
    id: 4,
    msg: 'ReactJs'
  },
  {
    id: 5,
    msg: 'Typescript'
  },
]);
const courseListF = ref<number>(1)
/**
 * 改变侧边栏导航背景色
 * @param {number} courseid
 */
const changeB = (courseid: number) => {
  courseListF.value = courseid
}

// 轮播图数据
const slidersList = ref<slidersDataI>([{
  id: null,
  imageUrl: undefined,
}]);


</script>

<style lang="scss" scoped>
.navSwiperOuter {
  width: 100%;
  background-image: linear-gradient(rgb(142, 219, 255), white);
  margin-top: 10px;

  .navOuter {
    width: 80%;
    margin: 0 auto;
    padding-top: 36px;
    padding-bottom: 16px;

    .navTop {
      height: 373px;
      display: flex;
      justify-content: left;
      border-radius: 10px;
      box-shadow: 0px 10px 12px 0px rgb(214, 214, 214);

      .navTopL {
        width: 160px;
        background-color: #2b283d;
        border-radius: 10px 0 0 10px;
        padding: 40px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &>li {
          width: 100%;
          height: 36px;
          color: white;
          display: flex;
          padding: 0 26px 0 20px;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          font-size: 18px;
        }

        .activeLi {
          background-image: linear-gradient(to right, rgb(113, 191, 255), #2b283d);
        }
      }

      .navTopR {
        height: 100%;
        width: 100%;

        .el-carousel {
          height: 371px;
          border-radius: 0 10px 10px 0;
          .lbt{
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .navBootom {
      padding: 10px 0px;

      &>ul {
        display: flex;
        align-items: center;

        &>li {
          width: 120px;
          display: flex;
          text-align: center;
          cursor: pointer;
        }
      }

      .navBootomL {
        &>i {
          color: red;
          font-size: 60px;
        }
      }

      .navBootomR {
        padding-top: 6px;

        &>h3 {
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>